<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script src="./js_thematic_map_example/script/jq/jquery.min.js"></script>

    <script>
        var amap = null;
        var that = this;
        map.Factory.create('mapui', {
            center: [98.17609405517578, 35.41583177128595],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 3,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style,
        }, (o) => {
            amap = o;
            that.init(amap.pmap);
        });


        function init(map) {

            $.get('./js_thematic_map_example/data/weibo.json', function (data) {
                var point = {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            'type': 'Feature',
                            'properties': {},
                            'geometry': {
                                type: 'LineString',
                                coordinates: []
                            }
                        }
                    ]
                };

                for (var j = 0; j < data.length; j++) {
                    for (var i = 0; i < data[j].length; i++) {
                        var geoCoord = data[j][i].geoCoord;
                        point.features[0].geometry.coordinates.push(geoCoord)
                    }
                }

                map.addSource('light-point', {
                    'type': 'geojson',
                    'data': point
                });


                map.addLayer({
                    "id": "light-point1",
                    "source": 'light-point',
                    'type': 'circle',
                    'paint': {
                        'circle-radius': 10,
                        'circle-color': "#FFFF66", //填充圆形的颜色
                        'circle-blur': 3, //模糊程度，默认0
                        'circle-opacity': 0.4, //透明度，默认为1
                    }
                });

                map.addLayer({
                    "id": "light-point2",
                    "source": 'light-point',
                    'type': 'circle',
                    'paint': {
                        'circle-radius': 7,
                        'circle-color': "#FFCC00", //填充圆形的颜色
                        'circle-blur': 4, //模糊程度，默认0
                        'circle-opacity': 0.3, //透明度，默认为1
                    }
                });

                map.addLayer({
                    "id": "light-point4",
                    "source": 'light-point',
                    'type': 'circle',
                    'paint': {
                        'circle-radius': 4,
                        'circle-color': "#FF9900", //填充圆形的颜色
                        'circle-blur': 5, //模糊程度，默认0
                        'circle-opacity': 0.2, //透明度，默认为1
                    }
                });

                map.addLayer({
                    "id": "light-point3",
                    "source": 'light-point',
                    'type': 'circle',
                    'paint': {
                        'circle-radius': 1.2,
                        'circle-color': "#FFFFFF", //填充圆形的颜色
                        'circle-blur': 0, //模糊程度，默认0
                        'circle-opacity': 1, //透明度，默认为1
                    }
                });


            })


        }
    </script>
</body>

</html>